// constant 
@color-theme:rgba(0,0,0,.8);
@color-molv:#309482;
@min-width:1200px;
// end constant

// common style start
// text style
.text-white {
    color:#fff;
}
.text-bold {
    font-weight:bold;
}

html,body {
    width:100%;height:100%;min-width:@min-width;
}
body, textarea, table, fieldset, input {
    font-family:"microsoft yahei";
}
a:link,a:active,a:visited,a:after {
    text-decoration:none;
}
// bg style
.bg-dark {
    background-color:@color-theme;
}
// scrollable
.scrollable {
    width:100%;height:100%;overflow:hidden;
    .scroll-container {
        width:calc(~"100% + 17px");height:100%;overflow-y:scroll;
        > div {
            width:100%;
        }        
    }
}
.icon {
   width: 1em; height: 1em;
   vertical-align: middle;
   fill: currentColor;
   overflow: hidden;
   font-size:36px;
   padding:0;
}

// header start
header {
    height:50px; line-height:50px;background-color:@color-theme; color:#fefefe;box-shadow:0 0 5px @color-theme;
    .logo {
        margin-left:5px;
    }
}
// end header

// section start
section {
    display:flex;height:calc(~"100% - 50px");
    
    .side-menu {
        width:199px;height:100%;border-right:1px solid #ddd;box-shadow:0 0 3px #ddd;background-color:#fefefe;
        
        .side-menu-list {
            
            .list-item {
                height:50px;line-height:50px;
                a {
                    display:block; color:currentcolor;padding:0 20px;
                    &.current {
                        background-color:#ddd;color:@color-molv;
                    }
                    &:hover {
                        .current;
                    }
                }
            }
        }
    }
    .explorer {
        width:calc(~"100% - 200px");
        .nav-buttons {
            padding:0 10px;height:50px;line-height:50px;
            // 上传按钮的样式
            #filePicker {
                .webuploader-pick + div {
                    opacity:0;
                }
            }
            .search-nav {
                position:relative;display:inline-block;width:270px;vertical-align:top;
                .form-control { display:inline-block;vertical-align:middle;border-radius:15px;}
                .iconfont { position:absolute;right:12px;top:2px; }
            }
        }
        .file-explorer {
            height:calc(~"100% - 52px");border-top:1px solid #ddd;
            .file-list {
                // 默认列表视图样式
                .file-item {
                    display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;
                    cursor:default;padding-left:20px;padding-right:100px;line-height:3;
                    &.checked {
                        background-color:rgba(53,167,243,.05);
                    }
                    &:hover {
                        .checked;
                    }
                    .file-name {
                        width:400px;
                        .iconfont { font-size:30px; vertical-align:middle; }
                        .file-name-text {
                            display:inline-block;vertical-align:middle;width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                        }
                    }
                    .file-length { width:100px; }
                    .last-modify-date {width:120px; }
                }
                // 缩略图列表样式
                &.view-thumbnail {
                    display:flex;flex-wrap:wrap;padding:20px;
                    
                    .file-item {
                        display:inline-block;border:0; width:120px;margin:0 10px 10px 0;
                        border-radius:5px;position:relative;padding:10px 0;
                        .file-name {
                            text-align:center;width:100%;
                            .icon { font-size:50px; }
                            .file-name-text { display:block;width:98%;padding:0 5px;}
                        }
                        .file-length,.last-modify-date { display:none; }
                        &:hover, &.checked {
                            .checkbox { display:block; }
                        }
                    }
                }
            }
        }
    }
    
}
// end section
